<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语-->
<head><!--头部-->
    <meta charset="UTF-8">
    <!--字符编码：utf-8国际编码  gb2312中文编码-->
    <meta name="Keywords" content="关键词">
    <meta name="Description" content="描述">
    <title>Document</title>
    <style>/*css样式表的衣柜*/
    * {
        margin: 0px;
        padding: 0px;
    }

    /*去除默认外边距、内边距*/
    body {
        background: url("images/bodyBg.jpg");
    }

    #wrap {
        width: 980px;
        margin: 100px auto;
    }

    #wrap ul li {
        width: 180px;
        height: 105px;
        margin: 30px 5px;
        position: relative;
        background: rgba(0, 0, 0, .7);
        list-style: none;
        float: left;
    }

    #wrap ul li:nth-child(9n+6) {
        margin-left: 100px;
    }

    #wrap ul li:before {
        content: "";
        position: absolute;
        width: 180px;
        height: 105px;
        background: rgba(0, 0, 0, .7);
        transform: rotate(-60deg); /*ccs3旋转*/
    }

    #wrap ul li:after {
        content: "";
        position: absolute;
        width: 180px;
        height: 105px;
        background: rgba(0, 0, 0, .7);
        transform: rotate(60deg);
        z-index: 1;
    }

    img {
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
        z-index: 2;
        transition: all 1s; /*CSS3动画过渡:ALL所有的属性*/
    }

    img:hover {
        transform: scale(1.5) rotate(360deg); /*CSS3放大及旋转*/
    }
    </style>
</head>
<body><!--身体-->
<div id="wrap">
    <ul>
        <li><img src="images/1.png"/></li>
        <li><img src="images/2.png"/></li>
        <li><img src="images/3.png"/></li>
        <li><img src="images/4.png"/></li>
        <li><img src="images/5.png"/></li>
        <li><img src="images/6.png"/></li>
        <li><img src="images/7.png"/></li>
        <li><img src="images/8.png"/></li>
        <li><img src="images/9.png"/></li>
        <li><img src="images/10.png"/></li>
        <li><img src="images/11.png"/></li>
        <li><img src="images/12.png"/></li>
        <li><img src="images/13.png"/></li>
        <li><img src="images/14.png"/></li>
    </ul>
</div>
<!--
    CSS3 nth-child()选择器
    1、nth-child(2)//选择到对应序号的元素
    2、nth-child(an+b)//a为倍数，n（0-..n） b 余数
    nth-child(an+6) n=1 a(1-8)

    伪类：
    before,相当于在元素内容的前面添加内容 行内元素

    after 相当于在元素内容的后面添加内容 行内元素

    行内元素设置宽高度：
    1、display:block,inline-block
    2、定位,absolute
    3、浮动

    元素自适应居中方法：
    1、margin padding百分比
    2、position:absolute;left:50%;top:50%;margin-left:-子元素宽度/2;
    margin-top:-子元素高度/2;
    3、position:absolute;left:0px;top:0px;right:0px;bottom:0px;
    margin:auto;
-->
</body>
</html>
